地图 map |
您所在的位置：网站首页 › uniapp 地图 maker气泡 › 地图 map |
|
mapFAQmap 地图。 平台差异说明 5+AppH5微信小程序支付宝小程序百度小程序头条小程序√√√√√x属性说明 属性名类型默认值说明平台差异说明longitudeNumber中心经度latitudeNumber中心纬度scaleNumber16缩放级别，取值范围为5-18markersArray标记点polylineArray路线circlesArray圆controlsArray控件include-pointsArray缩放视野以包含所有给定的坐标点App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序show-locationBoolean显示带有方向的当前定位点微信小程序、H5、百度小程序、支付宝小程序@markertapEventHandle点击标记点时触发App平台需要指定 marker 对象属性 id@callouttapEventHandle点击标记点对应的气泡时触发@controltapEventHandle点击控件时触发@regionchangeEventHandle视野发生变化时触发微信小程序、H5、百度小程序、支付宝小程序@tapEventHandle点击地图时触发@updatedEventHandle在地图渲染更新完成时触发微信小程序、H5、百度小程序注意 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。uni-app 只支持 gcj02 坐标markers标记点用于在地图上显示标记的位置 属性说明类型必填备注平台差异说明id标记点idNumber是marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。latitude纬度Number是浮点数，范围 -90 ~ 90longitude经度Number是浮点数，范围 -180 ~ 180title标注点名String否点击时显示，callout存在时将被忽略App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序iconPath显示的图标String是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径rotate旋转角度Number否顺时针旋转的角度，范围 0 ~ 360，默认为 0App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序alpha标注的透明度Number否默认1，无透明，范围 0 ~ 1App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序width标注图标宽度Number否默认为图片实际宽度App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序height标注图标高度Number否默认为图片实际高度App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序callout自定义标记点上方的气泡窗口Object否支持的属性见下表，可识别换行符。App-nvue 2.1.5+label为标记点旁边增加标签Object否支持的属性见下表，可识别换行符。App-nvue 2.1.5+、微信小程序、H5、5+APP、百度小程序anchor经纬度在标注图标的锚点，默认底边中点Object否{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点App-nvue 2.1.5+、微信小程序、H5、百度小程序marker 上的气泡 callout 属性说明类型平台差异说明content文本Stringcolor文本颜色StringApp-nvue 2.1.5+、微信小程序、H5、百度小程序fontSize文字大小NumberApp-nvue 2.1.5+、微信小程序、H5、百度小程序borderRadiuscallout边框圆角NumberApp-nvue 2.1.5+、微信小程序、H5、百度小程序bgColor背景色StringApp-nvue 2.1.5+、微信小程序、H5、百度小程序padding文本边缘留白NumberApp-nvue 2.1.5+、微信小程序、H5、百度小程序display'BYCLICK':点击显示; 'ALWAYS':常显String微信小程序、H5、百度小程序textAlign文本对齐方式。有效值: left, right, centerStringApp-nvue 2.1.5+、微信小程序、百度小程序marker 上的标签 label 属性说明类型平台差异说明content文本Stringcolor文本颜色StringApp-nvue 2.1.5+、微信小程序、H5、百度小程序fontSize文字大小NumberApp-nvue 2.1.5+、微信小程序、H5、百度小程序xlabel的坐标，原点是 marker 对应的经纬度NumberApp-nvue 2.1.5+、微信小程序、H5、百度小程序ylabel的坐标，原点是 marker 对应的经纬度NumberApp-nvue 2.1.5+、微信小程序、H5、百度小程序borderWidth边框宽度NumberApp-nvue 2.1.5+、微信小程序、百度小程序borderColor边框颜色StringApp-nvue 2.1.5+、微信小程序、百度小程序borderRadius边框圆角NumberApp-nvue 2.1.5+、微信小程序、百度小程序bgColor背景色StringApp-nvue 2.1.5+、微信小程序、百度小程序padding文本边缘留白NumberApp-nvue 2.1.5+、微信小程序、百度小程序textAlign文本对齐方式。有效值: left, right, centerStringApp-nvue 2.1.5+、微信小程序、百度小程序polyline 指定一系列坐标点，从数组第一项连线至最后一项 属性说明类型必填备注平台差异说明points经纬度数组Array是[{latitude: 0, longitude: 0}]color线的颜色String否8位十六进制表示，后两位表示alpha值，如：#0000AAwidth线的宽度Number否dottedLine是否虚线Boolean否默认falseApp-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序arrowLine带箭头的线Boolean否默认false，微信小程序开发者工具暂不支持该属性App-nvue 2.1.5+、微信小程序、百度小程序arrowIconPath更换箭头图标String否在arrowLine为true时生效App-nvue 2.1.5+、微信小程序、百度小程序borderColor线的边框颜色String否App-nvue 2.1.5+、微信小程序、H5、百度小程序borderWidth线的厚度Number否App-nvue 2.1.5+、微信小程序、H5、百度小程序circles 在地图上显示圆 属性说明类型必填备注latitude纬度Number是浮点数，范围 -90 ~ 90longitude经度Number是浮点数，范围 -180 ~ 180color描边的颜色String否8位十六进制表示，后两位表示alpha值，如：#0000AAfillColor填充颜色String否8位十六进制表示，后两位表示alpha值，如：#0000AAradius半径Number是strokeWidth描边的宽度Number否controls 在地图上显示控件，控件不随着地图移动 属性说明类型必填备注id控件idNumber否在控件点击事件回调会返回此idposition控件在地图的位置Object是控件相对地图位置iconPath显示的图标String是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对项目根目录；也支持临时路径clickable是否可点击Boolean否默认不可点击position 属性说明类型必填备注left距离地图的左边界多远Number否默认为0top距离地图的上边界多远Number否默认为0width控件宽度Number否默认为图片宽度height控件高度Number否默认为图片高度地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。 示例 export default { data() { return { title: 'map', latitude: 39.909, longitude: 116.39742, covers: [{ latitude: 39.909, longitude: 116.39742, iconPath: '../../../static/location.png' }, { latitude: 39.90, longitude: 116.39, iconPath: '../../../static/location.png' }] } }, methods: { }}map 组件相关操作的 JS API：uni.createMapContext 注意事项 小程序和 App 中， 组件是由引擎创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。在上绘制内容，可使用组件自带的marker、controls等属性，也可以使用组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容。详见小程序和 App 中，请勿在 scroll-view、swiper、picker-view、movable-view 中使用 组件。小程序和 App 中，css 动画对 组件无效。map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02。 组件在不同平台的底层引擎是不同的：H5、微信小程序为腾讯地图；App、支付宝小程序为高德地图；百度小程序端为百度地图。App端也可以使用百度地图，在manifest的源码视图中配置，具体参考map 组件默认的api是参考微信小程序的，如果觉得不够用，可以用plus.map，可以通过$getAppMap获取原生地图对象，详见H5 端获取定位信息，需要部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议。无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest文件中勾选相应模块，在SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。 FAQQ：应用中使用了 组件，打包为原生应用时，提示缺少权限模块怎么办？A：原生的地图，依赖第三方的 SDK，因此打包移动应用时，需要勾选相关的权限并填写 key 信息。详见：http://ask.dcloud.net.cn/article/35090 Q：国外应用想使用谷歌地图/google地图怎么办？A：1. 可以在web-view下调用谷歌的web地图；2. 可以写一个原生插件封装谷歌原生地图，具体参考uni-app插件市场的原生插件开发教程 发现错误？想参与编辑？在 GitHub 上编辑此页面！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |